<template>
    <div class="view">
        <Select v-model="SelectValue.province" style="width: 200px">
            <Option v-for="item in provinceList" :value="item.cityCode" :key="item.cityCode">
                {{ item.cityName }}
            </Option>
        </Select>

        <br /><br />

        <Select v-model="SelectValue.city" style="width: 200px">
            <Option v-for="item in cityList" :value="item.cityCode" :key="item.cityCode">
                {{ item.cityName }}
            </Option>
        </Select>

        <br /><br />

        <Select v-model="SelectValue.district" style="width: 200px">
            <Option v-for="item in districtList" :value="item.cityCode" :key="item.cityCode">
                {{ item.cityName }}
            </Option>
        </Select>

        <code>
            <pre
                >{{ this.SelectValue }}
            </pre>
        </code>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    computed: {
        ...mapState('1-Linkage-vuex', ['provinceList', 'cityList', 'districtList', 'SelectValue'])
    },
    watch: {
        'SelectValue.province'(val) {
            this.$store.commit('1-Linkage-vuex/setCityList', val)
        },
        'SelectValue.city'(val) {
            this.$store.commit('1-Linkage-vuex/setDistrictList', val)
        }
    },
    mounted() {
        // console.log(this.$store.state.Linkage);
    }
}
</script>
<style lang="less" scoped>

</style>
